<template>
  <div class="dataScreen-container">
    <div class="dataScreen-content" ref="dataScreenRef">
      <div class="title_TOP">VOTE智慧大数据平台</div>
      <div class="dataBox" v-if="showDataScreen">
        <div class="dataLeft">
          <BorderBox10 style="width: 100%; height: 32%">
            <div class="pieceTitle">近一周投票数</div>
            <div class="dataLeft_1" ref="dataLeft_1"></div>
          </BorderBox10>
          <BorderBox10 style="width: 100%; height: 32%">
            <div class="pieceTitle">订单支付比例</div>
            <div class="dataLeft_2" ref="dataLeft_2"></div>
          </BorderBox10>
          <BorderBox10 style="width: 100%; height: 32%">
            <div class="pieceTitle">活跃地区排行</div>
            <div class="dataLeft_3" ref="dataLeft_3"></div>
          </BorderBox10>
        </div>
        <div class="dataCenter">
          <div style="width: 100%; height: 38%; padding-top: 2rem">
            <div class="pieceTitle pt-5" style="">总业绩（元）</div>
            <centerNumber
              class="mt-5"
              :numm="money_show.totalMoney"
              :numLen="7"
              :noneDivide="true"
            ></centerNumber>
            <div class="price">
              <div>
                <p>
                  往日：
                  <span class="fz-20">
                    <!-- {{ money_show.historyMoney.toFixed() }} -->
                    <animationNum
                      :value="money_show.historyMoney"
                    ></animationNum>
                    <span class="fz-18">元</span>
                  </span>
                </p>
              </div>
              <div>
                <p>
                  当日：
                  <span class="fz-20">
                    <animationNum :value="money_show.toDayMoney"></animationNum>
                    <span class="fz-18">元</span>
                  </span>
                </p>
              </div>
            </div>
          </div>
          <div style="text-align: center">
            <Decoration6 class="decoration_5" />
          </div>
          <ul class="scrollStyle" style="height: 55%; overflow: auto">
            <vue3ScrollSeamless
              class="scroll-wrap border text-color"
              :classOptions="classOptions"
              :dataList="list"
              v-if="list.length > 2"
            >
              <div v-if="list.length > 0">
                <li
                  class="scrollStyle_item mt-2 mb-2"
                  v-for="item in list"
                  :key="item.id"
                >
                  <div class="activity_name">
                    {{ item.title }}
                  </div>
                  <div class="time_over" v-if="item.end_time_value.day > 0">
                    <span>活动倒计时：</span>
                    <span class="square">{{ item.end_time_value.day }}</span
                    >天
                    <span class="square">{{ item.end_time_value.hour }}</span
                    >时
                    <span class="square">{{ item.end_time_value.minute }}</span
                    >分
                    <span class="square">{{ item.end_time_value.second }}</span
                    >秒
                  </div>
                  <div style="text-align: center" v-else>本场活动已结束。</div>
                  <div class="money_get">
                    <div class="hot">
                      <p>
                        热度： <span>{{ item.hot_num }}</span>
                      </p>
                    </div>
                    <div class="help_money">
                      <p>
                        助力：
                        <span>{{ item.zhuli_num }}</span>
                      </p>
                    </div>
                  </div>
                </li>
              </div>
              <div v-if="list.length == 0" v-loading="loading"></div>
            </vue3ScrollSeamless>
            <li
              class="scrollStyle_item mt-2 mb-2"
              v-for="item in list"
              :key="item.id"
              v-else
            >
              <div class="activity_name">
                {{ item.title }}
              </div>
              <div class="time_over" v-if="item.end_time_value.day > 0">
                <span>活动倒计时：</span>
                <span class="square">{{ item.end_time_value.day }}</span
                >天 <span class="square">{{ item.end_time_value.hour }}</span
                >时 <span class="square">{{ item.end_time_value.minute }}</span
                >分 <span class="square">{{ item.end_time_value.second }}</span
                >秒
              </div>
              <div style="text-align: center" v-else>本场活动已结束。</div>
              <div class="money_get">
                <div class="hot">
                  <p>
                    热度： <span>{{ item.hot_num }}</span>
                  </p>
                </div>
                <div class="help_money">
                  <p>
                    助力：
                    <span>{{ item.zhuli_num }}</span>
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="dataRight">
          <BorderBox10 class="flex" style="width: 100%; height: 24%">
            <div class="rightContainer">
              <div class="pieceTitleRight">
                <p>ip数/天：</p>
                <div class="white">
                  <animationNum :value="zg_ip_log_value.dayIpN"></animationNum>
                </div>
              </div>
              <!-- 每日余额、分拣统计 -->
              <!-- <div class="dataLeft_5" ref="dataLeft_5"></div> -->
            </div>
          </BorderBox10>
          <BorderBox10 style="width: 100%; height: 24%">
            <div class="rightContainer">
              <div class="pieceTitleRight">
                <p>ip数/时：</p>
                <div class="white">
                  <animationNum :value="zg_ip_log_value.hourIpN"></animationNum>
                </div>
              </div>
              <!-- <div class="dataLeft_6" ref="dataLeft_6"></div> -->
            </div>
          </BorderBox10>
          <BorderBox10 style="width: 100%; height: 24%">
            <div class="rightContainer">
              <div class="pieceTitleRight">
                <p>ip数/分：</p>
                <div class="white">
                  <animationNum
                    :value="zg_ip_log_value.minuteIpN"
                  ></animationNum>
                </div>
              </div>
              <!-- <div class="dataLeft_7" ref="dataLeft_7"></div> -->
            </div>
          </BorderBox10>
          <BorderBox10 style="width: 100%; height: 24%">
            <div class="rightContainer">
              <div class="pieceTitleRight">
                <p>ip数/秒：</p>
                <div class="white">
                  <animationNum
                    :value="zg_ip_log_value.secondIpN"
                  ></animationNum>
                </div>
              </div>
              <!-- <div class="dataLeft_8" ref="dataLeft_8"></div> -->
            </div>
          </BorderBox10>
        </div>
      </div>
      <!-- <div class="dataBox"></div> -->
      <!-- 装饰 -->
      <Decoration2 class="decoration_1" />
      <Decoration2 class="decoration_2" :reverse="true" />
      <!-- <Decoration1 class="decoration_3" /> -->
      <Decoration3 class="decoration_4" />
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import {
  BorderBox11,
  BorderBox13,
  BorderBox12,
  Decoration2,
  Decoration1,
  Decoration3,
  Decoration6,
  Decoration7,
  BorderBox8,
  BorderBox10,
  BorderBox9,
} from "@dataview/datav-vue3/es";
import centerNumber from "@/components/workBench/centerNumber/index.vue";
import animationNum from "@/components/workBench/animationNum/index.vue";
import moment from "moment";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";
import {
  week_votes,
  proportion,
  vote_area,
  total_amount,
  dp_list,
  zg_ip_log,
} from "@/api/workBech";
import {
  ref,
  onMounted,
  onBeforeUnmount,
  watch,
  onBeforeMount,
  reactive,
  nextTick,
  computed,
} from "vue";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";
// 数字滚动
import gsap from "gsap";
import { values } from "lodash-es";
const number = ref(0);

// 渲染数据大屏
var showDataScreen = ref(false);
// 屏幕适配
var dataScreenRef = ref();
const getScale = (width = 1920 - 200, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
// 监听浏览器 resize 事件
const resize = () => {
  if (dataScreenRef.value) {
    // dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};

onMounted(() => {
  number.value = 50;
  if (dataScreenRef.value) {
    // dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `100%`;
    dataScreenRef.value.style.height = `100vh - 10px`;
  }
  showDataScreen.value = true;
  window.addEventListener("resize", resize);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
});

// 中间的金额
const money_show = reactive({
  historyMoney: 0,
  toDayMoney: 0,
  totalMoney: 0,
});
const moneyNum = async () => {
  const res = await total_amount({});

  money_show.historyMoney = Math.ceil(parseFloat(res.historyMoney)) || 0;
  money_show.toDayMoney = res.toDayMoney || 0;
  money_show.totalMoney = res.totalMoney || 0;
};

// 列表
const list = ref([]);
const getList = async () => {
  const res = await dp_list({});
  setInterval(() => {
    list.value = res.lists.map((item: Object) => {
      item.end_time_value = computedResidualTime(item);
      return item;
    });
  }, 1000);
  nextTick();
};

const classOptions = reactive({
  step: 0.5, //滚动速度值越大越快，但是值太小会卡顿
  limitMoveNum: list.value.length, //无缝滚动列表元素的长度，一般设置为列表的长度
  direction: 1, //方向: 0 往下 1 往上 2 向左 3 向右。
});

// 时间转换
const computedResidualTime = (time: Object) => {
  let date = new Date();
  let currentTime = parseInt(date.getTime() / 1000);
  let end_time = new Date(time.end_time).getTime() / 1000;
  let residualTime = end_time - currentTime;

  //这是剩余的所有秒数（规定时间过期时间－（本机距离1970年1月1日00:00:00的秒数－后台的创建时间））
  let day = formatNumber(parseInt(residualTime / (24 * 3600))); //剩余天数
  let hour = formatNumber(parseInt((residualTime % (24 * 3600)) / 3600)); //剩余小时
  let minute = formatNumber(parseInt((residualTime % 3600) / 60)); //剩余分钟
  let second = formatNumber(parseInt(residualTime % 60)); //剩余秒数
  return {
    day,
    hour,
    minute,
    second,
  };
};
const formatNumber = (num: String | Number) => {
  return num < 10 ? "0" + num : num.toString();
};

//
moneyNum();
getList();

// 近一周投票数
const dataLeft_1 = ref();
const week_votes_Week = ref([]);
const week_votes_Data = ref([]);
const week_votes_get = async () => {
  const res = await week_votes({});
  for (const key in res[0]) {
    let date = moment(key);
    week_votes_Week.value.push(date.format("DD"));
    week_votes_Data.value.push(res[0][key]);
  }
};
week_votes_get();
async function initDataLeft_1() {
  var myChart = echarts.init(dataLeft_1.value);
  var option = {
    // tooltip: {
    //   trigger: "axis",
    //   axisPointer: {
    //     type: "shadow",
    //   },
    // },
    grid: {
      left: "3%",
      top: "10%",
      right: "4%",
      bottom: "15%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: week_votes_Week.value,
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          color: "white",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          color: "white",
        },
      },
    ],
    series: [
      {
        name: "Direct",
        type: "bar",
        barWidth: "60%",
        data: week_votes_Data.value,
        itemStyle: {
          normal: {
            label: {
              textStyle: {
                color: "#FFFFFF", //用这个属性改变字体颜色
              },
            },
            color: function (colors) {
              var colorList = [
                "#FFB7DD",
                "#FFDDAA",
                "#EEFFBB",
                "#99FF99",
                "#99FFFF",
                "#CCCCFF",
                "#D1BBFF",
              ];
              return colorList[colors.dataIndex];
            },
          },
        },
      },
    ],
  };

  myChart.setOption(option);
}

// 订单支付比例  proportion
var dataLeft_2 = ref();
const no_pay = reactive({
  values: "",
  value: "",
  name: "未支付",
});
const pay = reactive({
  values: "",
  value: "",
  name: "已支付",
});
const proportion_get = async () => {
  const res = await proportion({});
  res.forEach((item: String | Number, index: Number) => {
    pay.value = {
      values: item.pay_count,
      value: item.pay_count_bili,
      name: "已支付",
    };
    no_pay.value = {
      values: item.no_pay_count,
      value: item.no_pay_count_bili,
      name: "未支付",
    };
  });
};
proportion_get();
async function initDataLeft_2() {
  var myChart = echarts.init(dataLeft_2.value);

  var option = {
    tooltip: {
      trigger: "item",
      position: "right",
      //   formatter: "{b}: {c}元 ({d}%)",
      formatter: function (params) {
        // params 是包含数据信息的对象
        return `${params.data.name}:${params.data.values}单`;
      },
    },
    legend: {
      top: "left",
      textStyle: {
        color: "white",
      },
    },
    label: {
      fontFamily: "Arial, Verdana, sans-serif",
      fontSize: 12,
      color: "#333",
    },
    textStyle: {
      color: "pink",
    },
    series: [
      {
        type: "pie",
        radius: "50%",
        itemStyle: {
          normal: {
            label: {
              textStyle: {
                color: "#FFFFFF", //用这个属性改变字体颜色
              },
            },
            // color: function (colors) {
            //   var colorList = ["#FFFF00", "#00FF00"];
            //   return colorList[colors.dataIndex];
            // },
          },
        },
        data: [no_pay.value, pay.value],
        label: {
          fontFamily: "Arial, Verdana, sans-serif",
          fontSize: 12,
          color: "#333",
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(256, 256, 256, 1)",
          },
          textStyle: {
            color: "white",
            //
          },
        },
      },
    ],
  };
  myChart.setOption(option);
}

// 活跃地区排行
const config = ref([
  {
    name: "南阳",
    value: 167,
  },
  {
    name: "周口",
    value: 67,
  },
  {
    name: "漯河",
    value: 123,
  },
  {
    name: "郑州",
    value: 55,
  },
  {
    name: "西峡",
    value: 98,
  },
]);
var dataLeft_3 = ref();
const vote_area_data = ref([]);
const vote_area_text = ref([]);
const vote_area_get = async () => {
  const res = await vote_area({});
  vote_area_data.value = res.map((item: Object) => item.count);
  vote_area_text.value = res.map((item: Object) => item.ip_address);
};
vote_area_get();
async function initDataLeft_3() {
  var myChart = echarts.init(dataLeft_3.value);
  var option = {
    tooltip: { show: false },
    grid: { left: 10, top: 10, bottom: 20, right: 10, containLabel: true },
    xAxis: {
      type: "value",
      boundaryGap: false,
      //   max: 20, // Math.ceil(max / 4) * 5 || 10
      axisLine: { show: true, lineStyle: { color: "#ccc" } },
      axisTick: { show: false },
      axisLabel: { color: "#fff" },
      splitLine: {
        lineStyle: { color: ["#CEEDFF"], type: [5, 8], dashOffset: 3 },
      },
    },
    yAxis: {
      type: "category",
      data: vote_area_text.value,
      axisLine: { show: true, lineStyle: { color: "#ccc" } },
      axisTick: { length: 3 },
      axisLabel: { fontSize: 12, color: "#fff", margin: 16, padding: 0 },
      inverse: true,
    },
    series: [
      {
        name: "数量",
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(82, 168, 255, 0.1)",
          borderRadius: [0, 8, 8, 0],
        },
        itemStyle: {
          color: "#52A8FF",
          normal: {
            borderRadius: [0, 8, 8, 0],
            color: function (params) {
              // 定义一个颜色集合
              let colorList = [
                "#52A8FF",
                "#00B389",
                "#FFA940",
                "#FF5A57",
                "#29EFC4",
                "#F8AEA4",
                "#FFC53D",
                "#009982",
                "#C099FC",
                "#F5855F",
              ];
              // 对每个bar显示一种颜色
              return colorList[params.dataIndex];
            },
          },
        },
        barMaxWidth: 16,
        label: {
          show: true,
          position: "insideRight",
          offset: [-5, 2],
          color: "#fff",
        },
        data: vote_area_data.value,
      },
    ],
  };

  myChart.setOption(option);
}

// 数据5
var dataLeft_5 = ref();
const zg_ip_log_value = ref<{
  dayIpN?: number;
  hourIpN?: number;
  minuteIpN?: number;
  secondIpN?: number;
}>({
  dayIpN: 0,
  hourIpN: 0,
  minuteIpN: 0,
  secondIpN: 0,
});
const zg_ip_log_get = async () => {
  const res = await zg_ip_log({});
  zg_ip_log_value.value = res;

  nextTick(() => {
    initDataLeft_5();
    initDataLeft_6();
    initDataLeft_7();
    initDataLeft_8();
  });
};
zg_ip_log_get();

async function initDataLeft_5() {
  var myChart = echarts.init(dataLeft_5.value);
  var option = {
    series: [
      {
        type: "gauge",
        startAngle: 90,
        endAngle: -270,
        pointer: {
          show: false,
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            borderWidth: 1,
            borderColor: "#464646",
            color: {
              type: "linear",
              // x,y坐标是用来调整渐变色的旋转角度
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#00ff00", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#ff0000", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        axisLine: {
          lineStyle: {
            width: 10,
          },
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          distance: 50,
          color: "#fff",
        },
        label: {
          show: true,
          //   formatter: "{b}: {c} ({d}%)",
          formatter: "{ value }",
          color: "red", // 这里设置文字的颜色
        },
        data: [
          {
            value: zg_ip_log_value.value.dayIpN,
            // value: "1871",
            title: {
              offsetCenter: ["0%", "50%"],
            },
            detail: {
              valueAnimation: true,
              offsetCenter: ["0%", "10%"],
              color: "#fff", // 这里设置文字的颜色
            },
          },
        ],
      },
    ],
  };

  myChart.setOption(option);
}
// 数据6
var dataLeft_6 = ref();
async function initDataLeft_6() {
  var myChart = echarts.init(dataLeft_6.value);
  var option = {
    series: [
      {
        type: "gauge",
        startAngle: 90,
        endAngle: -270,
        pointer: {
          show: false,
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            borderWidth: 1,
            borderColor: "#464646",
            color: {
              type: "linear",
              // x,y坐标是用来调整渐变色的旋转角度
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#00ff00", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#ff0000", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        axisLine: {
          lineStyle: {
            width: 10,
          },
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          distance: 50,
          color: "#fff",
        },
        label: {
          show: true,
          //   formatter: "{b}: {c} ({d}%)",
          formatter: "{ value }",
          color: "red", // 这里设置文字的颜色
        },
        data: [
          {
            value: zg_ip_log_value.value.hourIpN,
            title: {
              offsetCenter: ["0%", "50%"],
            },
            detail: {
              valueAnimation: true,
              offsetCenter: ["0%", "10%"],
              color: "#fff", // 这里设置文字的颜色
            },
          },
        ],
      },
    ],
  };
  myChart.setOption(option);
}
// 数据7
var dataLeft_7 = ref();
async function initDataLeft_7() {
  var myChart = echarts.init(dataLeft_7.value);
  var option = {
    series: [
      {
        type: "gauge",
        startAngle: 90,
        endAngle: -270,
        pointer: {
          show: false,
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            borderWidth: 1,
            borderColor: "#464646",
            color: {
              type: "linear",
              // x,y坐标是用来调整渐变色的旋转角度
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#00ff00", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#ff0000", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        axisLine: {
          lineStyle: {
            width: 10,
          },
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          distance: 50,
          color: "#fff",
        },
        label: {
          show: true,
          //   formatter: "{b}: {c} ({d}%)",
          formatter: "{ value }",
          color: "red", // 这里设置文字的颜色
        },
        data: [
          {
            value: zg_ip_log_value.value.minuteIpN,
            // value: 90,
            title: {
              offsetCenter: ["0%", "50%"],
            },
            detail: {
              valueAnimation: true,
              offsetCenter: ["0%", "10%"],
              color: "#fff", // 这里设置文字的颜色
            },
          },
        ],
      },
    ],
  };
  myChart.setOption(option);
}
// 数据8
var dataLeft_8 = ref();
async function initDataLeft_8() {
  var myChart = echarts.init(dataLeft_8.value);
  var option = {
    series: [
      {
        type: "gauge",
        startAngle: 90,
        endAngle: -270,
        pointer: {
          show: false,
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            borderWidth: 1,
            borderColor: "#464646",
            color: {
              type: "linear",
              // x,y坐标是用来调整渐变色的旋转角度
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#00ff00", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#ff0000", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        axisLine: {
          lineStyle: {
            width: 10,
          },
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          distance: 50,
          color: "#fff",
        },
        label: {
          show: true,
          //   formatter: "{b}: {c} ({d}%)",
          formatter: "{ value }",
          color: "red", // 这里设置文字的颜色
        },
        data: [
          {
            value: zg_ip_log_value.value.secondIpN,
            // value: 90,
            title: {
              offsetCenter: ["0%", "50%"],
            },
            detail: {
              valueAnimation: true,
              offsetCenter: ["0%", "10%"],
              color: "#fff", // 这里设置文字的颜色
            },
          },
        ],
      },
    ],
  };
  myChart.setOption(option);
}
onMounted(() => {
  if (!dataLeft_1.value) {
    setTimeout(() => {
      nextTick(() => {
        initDataLeft_1();
      });
    }, 1000);
  }
  if (!dataLeft_2.value) {
    setTimeout(() => {
      nextTick(() => {
        initDataLeft_2();
      });
    }, 1000);
  }
  if (!dataLeft_3.value) {
    setTimeout(() => {
      nextTick(() => {
        initDataLeft_3();
      });
    }, 1000);
  }
  if (!dataLeft_5.value) {
    setTimeout(() => {
      nextTick(() => {
        initDataLeft_5();
      });
    }, 1000);
  }
  if (!dataLeft_6.value) {
    setTimeout(() => {
      nextTick(() => {
        initDataLeft_6();
      });
    }, 1000);
  }
  if (!dataLeft_7.value) {
    setTimeout(() => {
      nextTick(() => {
        initDataLeft_7();
      });
    }, 1000);
  }

  if (!dataLeft_8.value) {
    setTimeout(() => {
      nextTick(() => {
        initDataLeft_8();
      });
    }, 1000);
  }
  //   右边IP每分钟调用一次
  setInterval(() => {
    nextTick(() => {
      zg_ip_log_get();
      initDataLeft_5();
      initDataLeft_6();
      initDataLeft_7();
      initDataLeft_8();
    });
  }, 60000);
  //   中间的金额  没十分钟调用一次
  //   setInterval(() => {
  //     moneyNum();
  //   }, 1000);
});
</script>

<style lang="scss" scoped>
.title_TOP {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
}
.scrollStyle {
  width: 90%;
  margin: 0 auto;
  .scrollStyle_item {
    color: white;
    // background-color: #4d2162;
    background: linear-gradient(
      rgba(21, 177, 255, 0.3),
      rgba(61, 93, 253, 0.3)
    );
    padding: 10px;
    border-radius: 10px;
    .activity_name {
      font-size: 1.1rem;
      font-weight: 700;
      text-align: center;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis; //文本溢出显示省略号
      white-space: nowrap; //文本不会换行
    }
    .time_over {
      text-align: center;
      width: 60%;
      margin: 1px auto;
      .square {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        line-height: 1rem;
        background-color: rgba(256, 256, 256, 0.4);
      }
    }
    .money_get {
      display: flex;
      width: 48.5%;
      text-align: center;
      margin: 1px auto;
      justify-content: space-between;
    }
    &:first-child {
      margin-top: 0;
    }
  }
}
.scrollStyle::-webkit-scrollbar {
  width: 0; /*  设置纵轴（y轴）轴滚动条 */
  height: 0; /*  设置横轴（x轴）轴滚动条 */
}
/* 滚动条滑块（里面小方块） */
.scrollStyle::-webkit-scrollbar-thumb {
  //   border-radius: 10px;
  display: none;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(21, 82, 180, 0.9);
}
/* 滚动条轨道 */
.scrollStyle::-webkit-scrollbar-track {
  border-radius: 0;
  box-shadow: inset 0 0 5px rgba(59, 87, 227, 0.2);
  background: rgba(0, 0, 0, 0.9);
}
.dataScreen-container {
  width: 100%;
  height: calc(100vh - 120px);
  .dataScreen-content {
    height: 100%;
    // background-image: url(../../assets/images/dataBg.png);
    // background-size: 100% 100%;
    // background-repeat: no-repeat;
    background-color: #090b62;
    // position: fixed;
    // top: 50%;
    // left: 50%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s;
    transform-origin: left top;
  }
  .dataBox {
    display: flex;
    padding: 40px 10px 10px;
    justify-content: space-between;
    box-sizing: border-box;
    position: relative;
    z-index: 999;
    height: 100%;
  }
  .pieceTitle {
    font-size: 16px;
    color: #84a2f5;
    padding: 10px 30px 0;
    font-weight: bold;
    text-align: center;
  }
  .pieceTitleRight {
    font-size: 1rem;
    color: #84a2f5;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding-left: 30%;
    //flex-wrap: wrap;
    // justify-content: center;
    // text-align: center;
    .white {
      color: #fff;
      font-size: 1.3rem;
    }
    p {
      width: 100%;
    }
  }
  .video {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    padding: 20px;
    height: 88%;
    video {
      width: 100%;
      height: 100%;
    }
  }
  .dataLeft {
    width: 29%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    .dataLeft_1 {
      width: 90%;
      height: 90%;
      margin: 0 auto;
    }
    .dataLeft_2 {
      width: 90%;
      height: 90%;
      margin: 0 auto;
    }
    .dataLeft_3 {
      width: 90%;
      height: 90%;
      margin: 0 auto;
    }
  }
  .dataCenter {
    width: 40%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    overflow: hidden;
    .dataLeft_4_title {
      width: 90%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: white;
      font-size: 22px;
      margin-bottom: 10px;
      & > div {
        width: 33%;
        text-align: center;
      }
    }
    .dataLeft_4 {
      width: 90%;
      height: 280px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .dataLeft_4_1,
      .dataLeft_4_2,
      .dataLeft_4_3 {
        width: 33%;
        height: 280px;
      }
    }
    .price {
      width: 80%;
      margin: 0 auto;
      color: white;
      margin-top: 2rem;
      display: flex;
      justify-content: space-around;
      font-size: 1rem;
      text-align: center;
    }
  }
  .dataRight {
    width: 29%;
    height: 50%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    .rightContainer {
      display: flex;
      width: 100%;
      height: 100%;
      flex-wrap: wrap;
      align-content: space-around;
      .dataLeft_5 {
        width: 50%;
        height: 90%;
        margin: 0 auto;
      }
      .dataLeft_6 {
        width: 50%;
        height: 90%;
        margin: 0 auto;
      }
      .dataLeft_7 {
        width: 50%;
        height: 90%;
        margin: 0 auto;
      }
      .dataLeft_8 {
        width: 50%;
        height: 90%;
        margin: 0 auto;
      }
    }
  }
  .decoration_1 {
    width: 200px;
    height: 5px;
    position: absolute;
    top: 50px;
    left: 30px;
  }
  .decoration_2 {
    width: 5px;
    height: 150px;
    position: absolute;
    top: 500px;
    left: 30px;
  }
  .decoration_3 {
    width: 200px;
    height: 50px;
    position: absolute;
    bottom: 50px;
    left: 10px;
  }
  .decoration_4 {
    width: 250px;
    height: 30px;
    position: absolute;
    bottom: 47%;
    right: 0px;
  }
  .decoration_5 {
    width: 300px;
    height: 30px;
    margin-right: 0 auto;
  }
}
.fz-20 {
  font-size: 1.5rem;
}
.fz-16 {
  font-size: 1rem;
}
</style>
